/* eslint-disable react/prop-types */
import React from 'react';
import {Form, Input, Button, Switch,message} from 'antd';
import Api from '@/api/index';
import {withRouter} from 'react-router-dom';
const { TextArea } = Input;

class RoleForm extends React.Component {
    constructor(props){
        super(props)
        this.state = {

        }
    }
    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                const {status,...other} = values;
                Api.createRole({...other,status:status?1:0}).then(res => {
                    if(res.code == 200){
                        message.success('保存成功');
                        this.props.history.push({pathname:'/system/role'})
                    }
                })
            }
        });
    };


    render() {
        const {getFieldDecorator} = this.props.form;

        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 4},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 20},
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 24,
                    offset: 0,
                },
                sm: {
                    span: 20,
                    offset: 2,
                },
            },
        };

        return (
            <Form {...formItemLayout} onSubmit={this.handleSubmit}>
                <Form.Item label="角色名称">
                    {getFieldDecorator('title', {
                        rules: [
                            {
                                required: true,
                                message: '请输入角色名称',
                            },
                        ],
                    })(<Input/>)}
                </Form.Item>
                <Form.Item label="角色描述">
                    {getFieldDecorator('description', {

                    })(<TextArea row={4}/>)}
                </Form.Item>
                <Form.Item label="状态">
                    {getFieldDecorator('status', { valuePropName: 'checked' })(<Switch />)}
                </Form.Item>

                <Form.Item {...tailFormItemLayout} style={{marginTop: '30px', textAlign: 'center'}}>
                    <Button className="submit_btn" type="default">取消</Button>
                    <Button className="submit_btn" type="primary" htmlType="submit">确定</Button>
                </Form.Item>
            </Form>
        );
    }
}

export default Form.create()(withRouter(RoleForm));
